
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的订单</title>

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <link rel="stylesheet" href="./css/fileinput.min.css">

    <script src="http://code.jquery.com/jquery-3.7.0.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <script src="./js/fileinput.min.js"></script>

    <style>
        th, td {
            text-align: center
        }
        .a{
            position: absolute;
            left:10%;
            top:10%;
        }
        .b{
            position: absolute;
            left:3%;
            top:20%;
            width: 100%;
        }
    </style>

</head>
<body>
<!-- 导航  开始 -->
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">商品购物管理</a>
                </div>
                <div>
                    <!--向左对齐-->
                    <ul class="nav navbar-nav navbar-left">
                        <li class="dropdown">
                            <a href="home2.jsp" class="dropdown-toggle" >
                                首页
                                <b class="caret"></b>
                            </a>
                        </li>
                        <li class="dropdown">
                            <a href="shopping2.jsp" class="dropdown-toggle" >商品</a>
                        </li>
                        <li class="dropdown">
                            <a href="myorder.jsp" class="dropdown-toggle" >我的订单</a>
                        </li>
                        <li class="dropdown">
                            <a href="Person.jsp" class="dropdown-toggle">
                                个人中心
                            </a>
                        </li>
                        <li class="dropdown">
                            <a href="/Test/buyerlogout" class="dropdown-toggle" >退出</a>
                        </li>
                        <li class="dropdown">
                            <a href="login.html" class="dropdown-toggle" >后台管理</a>
                        </li>
                    </ul>
                    <!--向右对齐 -->
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="shopcar.jsp" class="dropdown-toggle">
                                <img  src="./images/GWC.jpg" style="width: 50px; height: 50px;" alt="Logo">
                            </a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle">
                        <li class="dropdown"><%=session.getAttribute("buyername")%></li>
                        </a>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div class="col-md-1"></div>
</div>
<!-- 导航  结束 -->
<div class="a">
    <h2>我的订单</h2>
    <%--搜索栏 开始--%>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-addon">商品：</span>
                        <input type="text" class="form-control" placeholder="请输入搜索商品名" id="searchname">
                    </div>
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-default" onclick="buyerListName(1,5)">搜索</button>
                </div>
                <div class="col-md-4"></div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
<%--  搜索栏 结束  --%>
</div>
<br><br><br>
<!--表格 开始-->
<div class="row b">
    <div class="col-md-1">
    </div>
    <div class="col-md-10 ">
        <table class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>总价</th>
                <th>商品详情</th>
                <th>收货信息 </th>
                <th>订单状态</th>
                <%--<th>支付方式</th>--%>
                <th>下单时间</th>
            </tr>
            </thead>
            <tbody id="tb">

            </tbody>
        </table>
        <!--分页 开始-->
        <ul class="pagination" style="margin-left: 35%" id="fy">
           <%-- <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>--%>
        </ul>
        <!--分页 结束-->
    </div>
    <div class="col-md-1"></div>
</div>


<!--表格 结束-->

</body>



<script src="./js/upload.js"></script>
<script>
    var currentTime = new Date().toLocaleTimeString();
    console.log(currentTime);
    //列表渲染
    var pageIndex = 1;//第几页
    var pageSize = 5;//每页几条
   /* buyerList(pageIndex, pageSize)*/
    buyerListName(pageIndex, pageSize);
    function buyerList(pageIndex, pageSize) {
        //获取搜索框的内容
        var searchname = $("#searchname").val();
        var obj = {};//定义一个对象
        //获取搜索的名称

        //组装数据
        obj.search = null;
        obj.pageIndex = pageIndex;
        obj.pageSize = pageSize;


        $.ajax({
            url: "/Test/orders?method=getOrdersNames",//请求路径
            //data:JSON.stringify(obj),//请求数据
            data: {
                searchname: searchname,
                pageIndex: pageIndex,
                pageSize: pageSize,
            },

            type: "GET",//请求方式
            dataType: "json",//请求数据类型
            contentType: "application/json",//返回数据类型
            success: function (data) {
                console.log(data);
                //渲染表格
                var html = "";
                var count = data.count;//总条数
                data = data.data;
                data.forEach((e, i) => {
                    html += ' <tr>' +
                        '<td>' + i + '</td>' +
                        '<td>' + e.ordersprice + '</td>' +
                        '<td>' + e.ordersname + '</td>' +
                        '<td>' + e.ordersplace + '</td>' +
                        '<td>' + e.ordersnum + '</td>' +
                        '<td>' + e.createdate + '</td>' +
                        '</tr>'
                })
                $("#tb").html(html);

                /*//渲染分页组件
                var fyhtml = ' <li><a onclick="buyerList(' + (pageIndex - 1 > 0 ? pageIndex - 1 : 1) + ','
                    + pageSize + ')" href="#">&raquo;</a></li>';
                //调用Math.ceil()向上取整 2.1=3
                var page = Math.ceil(count / pageSize);
                for (var i = 1; i <= page; i++) {
                    fyhtml += ' <li><a onclick="buyerList(' + i + ',' + pageSize + ')" href="#">' + i + '</a></li>';
                }

                fyhtml += ' <li><a onclick="buyerList(' + (pageIndex + 1 >= page ? page : (pageIndex + 1)) + ','
                    + pageSize + ')" href="#">&raquo;</a></li>';
                $("#fy").html(fyhtm);*/

                //渲染分页
                var fyhtml='<li><a onclick="buyerList('+(pageIndex-1>0?pageIndex-1:1)+','+pageSize+')" href="#">&laquo;</a></li>';
                //调用Math.ceil()向上取整  2.1=3  2.5=3
                var page= Math.ceil(count/pageSize);
                for(var i=1;i<=page;i++){
                    fyhtml +=' <li><a onclick="buyerList('+i+','+pageSize+')" href="#">'+i+'</a></li>';
                }
                fyhtml += ' <li><a onclick="buyerList('+(pageIndex+1>=page?page:(pageIndex+1))+','+pageSize+')" href="#">&raquo;</a></li>';
                $("#fy").html(fyhtml);
            }
        }
        )
    }


  //根据当前用户查询
    function buyerListName(pageIndex, pageSize) {

        var oname='<%=session.getAttribute("buyername")%>'.toString();
        //获取搜索框的内容
            searchname=$("#searchname").val();
        var obj = {};//定义一个对象
        //获取搜索的名称

        //组装数据
        obj.search = null;
        obj.pageIndex = pageIndex;
        obj.pageSize = pageSize;


        $.ajax({
                url: "/Test/orders?method=getOrdersNames",//请求路径
                //data:JSON.stringify(obj),//请求数据
                data: {
                    searchname: searchname,
                    oname:oname,
                    pageIndex: pageIndex,
                    pageSize: pageSize,
                },
                type: "GET",//请求方式
                dataType: "json",//请求数据类型
                contentType: "application/json",//返回数据类型
                success: function (data) {
                    console.log(data);
                    //渲染表格
                    var html = "";
                    var count = data.count;//总条数
                    data = data.data;
                    data.forEach((e, i) => {
                        html += ' <tr>' +
                            '<td>' + i + '</td>' +
                            '<td>' + e.ordersprice + '</td>' +
                            '<td>' + e.ordersname + '</td>' +
                            '<td>' + e.ordersplace + '</td>' +
                            '<td>' + e.ordersnum + '</td>' +
                            '<td>' + e.createdate + '</td>' +
                            '</tr>'
                    })
                    $("#tb").html(html);

                    /*//渲染分页组件
                    var fyhtml = ' <li><a onclick="buyerList(' + (pageIndex - 1 > 0 ? pageIndex - 1 : 1) + ','
                        + pageSize + ')" href="#">&raquo;</a></li>';
                    //调用Math.ceil()向上取整 2.1=3
                    var page = Math.ceil(count / pageSize);
                    for (var i = 1; i <= page; i++) {
                        fyhtml += ' <li><a onclick="buyerList(' + i + ',' + pageSize + ')" href="#">' + i + '</a></li>';
                    }

                    fyhtml += ' <li><a onclick="buyerList(' + (pageIndex + 1 >= page ? page : (pageIndex + 1)) + ','
                        + pageSize + ')" href="#">&raquo;</a></li>';
                    $("#fy").html(fyhtm);*/

                    //渲染分页
                    var fyhtml='<li><a onclick="buyerListName('+(pageIndex-1>0?pageIndex-1:1)+','+pageSize+')" href="#">&laquo;</a></li>';
                    //调用Math.ceil()向上取整  2.1=3  2.5=3
                    var page= Math.ceil(count/pageSize);
                    for(var i=1;i<=page;i++){
                        fyhtml +=' <li><a onclick="buyerListName('+i+','+pageSize+')" href="#">'+i+'</a></li>';
                    }
                    fyhtml += ' <li><a onclick="buyerListName('+(pageIndex+1>=page?page:(pageIndex+1))+','+pageSize+')" href="#">&raquo;</a></li>';
                    $("#fy").html(fyhtml);
                }
            }
        )
    }


</script>
    
</html>
